<template>
    <div class="content-view">
        <headerView></headerView>
        <div class="main-view">
            <div class="left-view">
                <div class="left-top-view">
                    <div class="main-left-top-orgData">机构平台累计数据</div>
                    <div class="main-left-top-img-view">
                        <img src="../../assets/images/main-left-top-hr.png"></img>
                    </div>
                    <div class="main-left-top-data">
                        <div class="main-left-top-data-view orgNumBg">
                            <img src="../../assets/images/main-lef-top-orgNum.png">
                            <div class="main-left-top-data-view-value">{{ orgData.platformDeptCount }}</div>
                            <div class="main-left-top-data-view-title">机构数</div>
                        </div>
                        <div class="main-left-top-data-view stuNumBg">
                            <img src="../../assets/images/main-lef-top-stuNum.png">
                            <div class="main-left-top-data-view-value">{{ orgData.platformStudentCount }}</div>
                            <div class="main-left-top-data-view-title">学生数</div>
                        </div>
                        <div class="main-left-top-data-view teacherNumBg">
                            <img src="../../assets/images/main-lef-top-teaNum.png">
                            <div class="main-left-top-data-view-value">{{ orgData.platformTeacherCount }}</div>
                            <div class="main-left-top-data-view-title">教师数</div>
                        </div>
                    </div>
                </div>
                <div class="left-bottom-view">
                    <div class="main-left-bottom-title">
                        <div class="main-left-bottom-title-top">
                            <div>{{areaName}}</div>
                        </div>
                        <div class="main-left-bottom-title-bottom">
                            <div class="title-num">{{ orgData.areaDeptCount }}</div>
                            <div class="title-unit">家</div>
                        </div>
                    </div>
                    <div class="main-left-bottom-content">
                        <el-table :data="tableData" height="40vh" class="hide-scrollbar"
                                  :header-cell-style="headClass" :cell-style="rowClass">
                            <el-table-column prop="area_name" label="机构区域">
                            </el-table-column>
                            <el-table-column prop="count" label="数量">
                            </el-table-column>
                            <el-table-column prop="percentage" label="比例">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="right-view">
                <div class="right-top-view">
                    <div class="right-view-left" v-if="showMapDiv">
                        <china-map class="chinaMapStyle" v-if="showMap" :mapData="mapData"></china-map>
                        <el-table :data="tableRealTimeData" v-else
                                  :header-cell-style="realTableHeaderCellStyle"
                                  :cell-style="realTableCellStyle" ref="myTable"
                                  :key="tableKey"
                                  height="calc(100%)" class="custom-scrollbar" @mousewheel.native="handleMouseWheel">
                          <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                                           :label="column.label" :width="column.max_width">
                          </el-table-column>
                        </el-table>
                    </div>
                    <div class="right-view-right">
                        <div class="main-left-top-orgData">排行榜</div>
                        <div class="main-left-top-img-view">
                            <img src="../../assets/images/main-left-top-hr.png"></img>
                        </div>
                        <div class="paihangbangChart">
                            <div ref="chart"></div>
                        </div>
                    </div>
                </div>
                <div class="right-bottom-view">
                    <div class="main-right-bottom-top">
                        <div class="main-right-bottom-top-title">
                            <div class="main-left-top-orgData">平台实时数据变化</div>
                            <div class="main-left-top-img-view">
                                <img src="../../assets/images/main-left-top-hr.png">
                            </div>
                        </div>
                        <div class="main-right-bottom-top-detail">
                            <span @click="goDataOverviewPage">进入平台查看详细信息 &gt; </span>
                        </div>
                    </div>
                    <div class="main-right-bottom-bottom">
                        <div class="main-right-bottom-bottom-data" ref="orgHoverDiv"
                             @click="handleRealTime($event,tableRealOrgTimeData,orgTableColumns)">
                            <div class="iconDiv one" ref="orgIconHoverDiv">
                                <img src="../../assets/images/16468@1x.png" ref="orgIconHoverImg">
                            </div>
                            <div class="num" ref="orgNumHoverDiv">{{tableRealOrgTimeData.length}}</div>
                            <div class="titleStype" ref="orgDescHoverDiv">新增机构数</div>
                        </div>
                        <div class="main-right-bottom-bottom-data" ref="stuHoverDiv"
                             @click="handleRealTime($event,tableRealStuTimeData,stuTableColumns)">
                            <div class="iconDiv two">
                                <img src="../../assets/images/16469@1x.png">
                            </div>
                            <div class="num">{{tableRealStuTimeData.length}}</div>
                            <div class="titleStype">新增学生数</div>
                        </div>
                        <div class="main-right-bottom-bottom-data" ref="teaHoverDiv"
                             @click="handleRealTime($event,tableRealTeaTimeData,teaTableColumns)">
                            <div class="iconDiv three">
                                <img src="../../assets/images/16470@1x.png">
                            </div>
                            <div class="num">{{tableRealTeaTimeData.length}}</div>
                            <div class="titleStype">新增教师数</div>
                        </div>
                        <div class="main-right-bottom-bottom-data"  ref="useNumHoverDiv"
                             @click="handleRealTime($event,tableRealEvaluateUseNumTimeData,evaluateUseNumTableColumns)">
                            <div class="iconDiv four">
                                <img src="../../assets/images/16471@1x.png">
                            </div>
                            <div class="num">{{tableRealEvaluateUseNumTimeData.length}}</div>
                            <div class="titleStype">评估使用次数</div>
                        </div>
                        <div class="main-right-bottom-bottom-data" ref="courPlanHoverDiv"
                             @click="handleRealTime($event,tableRealCourPlanGenerateTimeData,courPlanGenerateTableColumns)">
                            <div class="iconDiv five">
                                <img src="../../assets/images/16468@1x.png">
                            </div>
                            <div class="num">{{tableRealCourPlanGenerateTimeData.length}}</div>
                            <div class="titleStype">课程计划生成数</div>
                        </div>
                        <div class="main-right-bottom-bottom-data" ref="systemLoginHoverDiv"
                             @click="handleRealTime($event,tableRealSystemLoginTimeData,systemLoginTableColumns)">
                            <div class="iconDiv six">
                                <img src="../../assets/images/16473@1x.png">
                            </div>
                            <div class="num">{{tableRealSystemLoginTimeData.length}}</div>
                            <div class="titleStype">系统登录数据</div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>

<script>
    import headerView from '../header/index'
    import chinaMap from '../components/map/index'
    import * as echarts from 'echarts';
    import {getGrowthData, getPlatformStatistics} from '@/api/home'

    export default {
      name: "index",
      components: {
          headerView,
          chinaMap
      },
      data() {
          return {
            areaName:'',
            mapData:[],
            orgData: {},
            realTableHeaderCellStyle: {background:'#11A2F0',textAlign:'center',color:'white',
              borderBottom: '1px solid #11A2F0'},
            realTableCellStyle: {background:'#66C8FF',textAlign:'center',color:'white',
              borderBottom: '1px solid #11A2F0',},
            showMapDiv: false,
            showMap: true,
            clickItem: undefined,
            tableColumns: [],
            systemLoginTableColumns: [// 系统登录数据表头
              {
                label: '日期',
                prop: 'login_date',
                max_width: 120,
                align: 'center',
              },
              {
                label: '时间',
                prop: 'login_time',
                max_width: 100,
                align: 'center',
              },
              {
                label: '省份',
                prop: 'area_province',
                max_width: 80,
                align: 'center',
              },
              {
                label: '市县区域',
                prop: 'area',
                max_width: 180,
                align: 'center',
              },
              {
                label: '机构名称',
                prop: 'dept_name',
                max_width: 150,
                align: 'center',
              },
              {
                label: '登录账号',
                prop: 'phone',
                max_width: 130,
                align: 'center',
              },
            ],
            courPlanGenerateTableColumns: [// 课程计划生成数表头
              {
                label: '日期',
                prop: 'create_date',
                max_width: 100,
                align: 'center',
              },
              {
                label: '时间',
                prop: 'create_time',
                max_width: 80,
                align: 'center',
              },
              {
                label: '省份',
                prop: 'area_province',
                max_width: 80,
                align: 'center',
              },
              {
                label: '市县区域',
                prop: 'area',
                max_width: 180,
                align: 'center',
              },
              {
                label: '机构名称',
                prop: 'dept_name',
                max_width: 130,
                align: 'center',
              },
              {
                label: '评估工具',
                prop: 'node_name',
                max_width: 100,
                align: 'center',
              },
              {
                label: '计划名称',
                prop: 'plate_name',
                max_width: 100,
                align: 'center',
              },

            ],
            evaluateUseNumTableColumns: [// 评估使用次数表头
              {
                label: '日期',
                prop: 'commit_date',
                max_width: 130,
                align: 'center',
              },
              {
                label: '时间',
                prop: 'commit_time',
                max_width: 100,
                align: 'center',
              },
              {
                label: '省份',
                prop: 'area_province',
                max_width: 100,
                align: 'center',
              },
              {
                label: '市县区域',
                prop: 'area',
                max_width: 180,
                align: 'center',
              },
              {
                label: '机构名称',
                prop: 'dept_name',
                max_width: 150,
                align: 'center',
              },
              {
                label: '评估工具',
                prop: 'node_name',
                max_width: 100,
                align: 'center',
              },

            ],
            teaTableColumns: [// 教师表头
              {
                label: '日期',
                prop: 'create_date',
                max_width: 130,
                align: 'center',
              },
              {
                label: '时间',
                prop: 'create_time',
                max_width: 100,
                align: 'center',
              },
              {
                label: '省份',
                prop: 'area_province',
                max_width: 100,
                align: 'center',
              },
              {
                label: '市县区域',
                prop: 'area',
                max_width: 180,
                align: 'center',
              },
              {
                label: '机构名称',
                prop: 'dept_name',
                max_width: 150,
                align: 'center',
              },
              {
                label: '教师姓名',
                prop: 'nick_name',
                max_width: 100,
                align: 'center',
              },

            ],
            stuTableColumns: [// 学生列
              {
                label: '日期',
                prop: 'create_date',
                max_width: 130,
                align: 'center',
              },
              {
                label: '时间',
                prop: 'create_time',
                max_width: 100,
                align: 'center',
              },
              {
                label: '省份',
                prop: 'area_province',
                max_width: 100,
                align: 'center',
              },
              {
                label: '市县区域',
                prop: 'area',
                max_width: 180,
                align: 'center',
              },
              {
                label: '机构名称',
                prop: 'dept_name',
                max_width: 150,
                align: 'center',
              },
              {
                label: '学生姓名',
                prop: 'stu_name',
                max_width: 100,
                align: 'center',
              },

            ],
            orgTableColumns: [// 机构列
              {
                label: '日期',
                prop: 'create_date',
                max_width: 130,
                align: 'center',
              },
              {
                label: '时间',
                prop: 'create_time',
                max_width: 130,
                align: 'center',
              },
              {
                label: '省份',
                prop: 'area_province',
                max_width: 100,
                align: 'center',
              },
              {
                label: '市县区域',
                prop: 'area',
                max_width: 200,
                align: 'center',
              },
              {
                label: '机构名称',
                prop: 'dept_name',
                max_width: 200,
                align: 'center',
              },

            ],
            tableKey: Math.random(),
            tableRealTimeData:[],
            // 机构数据变化集合
            tableRealOrgTimeData:[],
            // 新增学生集合
            tableRealStuTimeData:[],
            // 新增教师集合
            tableRealTeaTimeData:[],
            // 新增评估使用次数集合
            tableRealEvaluateUseNumTimeData:[],
            // 课程计划生成数
            tableRealCourPlanGenerateTimeData:[],
            // 系统登录数据
            tableRealSystemLoginTimeData:[],
            growthData: {},
            tableData: [],
            orgRankCategory: ['四川', '云南', '贵州', '湖北', '湖南', '江西', '山西', '福建', '安徽'],
            orgRankValues: [999, 1000, 1500, 2233, 5567, 6666, 8860, 8800, 8888],
        };
      },
      mounted() {
          // 当组件挂载后，初始化图表
        console.log("mounted................")
      },
      methods: {
          handleMouseWheel(event) {
            const tableWrapper = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper');
            if (event.deltaY < 0) { // 上滚
              tableWrapper.scrollTop -= 30; // 调整30可以根据需要调整速度
            } else { // 下滚
              tableWrapper.scrollTop += 30; // 调整30可以根据需要调整速度
            }
            event.preventDefault(); // 阻止默认的滚动事件，防止页面滚动
          },
          handleRealTime(event,data,columns){//点击实时新增数据
            if(this.clickItem){
              this.removeRealDataStyle(this.clickItem)
            }
            this.addRealDataClassStyle(event);
            this.tableKey = Math.random();
            this.tableRealTimeData = data;
            this.tableColumns = columns;
          },
          handleOrgRealTime(event){ // 点击新增机构数据数
            this.addRealDataClassStyle(event);
            this.removeRealDataStyle(this.$refs.stuHoverDiv);
            this.removeRealDataStyle(this.$refs.teaHoverDiv);
            this.removeRealDataStyle(this.$refs.useNumHoverDiv);
            this.removeRealDataStyle(this.$refs.courPlanHoverDiv);
            this.removeRealDataStyle(this.$refs.systemLoginHoverDiv);
            this.tableRealTimeData = this.tableRealOrgTimeData;
            this.tableColumns = this.orgTableColumns;
          },
          handleStuRealTime(event){ // 点击新增机构数据数
            this.addRealDataClassStyle(event);
            this.removeRealDataStyle(this.$refs.orgHoverDiv);
            this.removeRealDataStyle(this.$refs.teaHoverDiv);
            this.removeRealDataStyle(this.$refs.useNumHoverDiv);
            this.removeRealDataStyle(this.$refs.courPlanHoverDiv);
            this.removeRealDataStyle(this.$refs.systemLoginHoverDiv);
            this.tableRealTimeData = this.tableRealStuTimeData;
            this.tableColumns = this.stuTableColumns;
          },
          handleTeaRealTime(event){ // 点击教师数据数
            this.addRealDataClassStyle(event);
            this.removeRealDataStyle(this.$refs.orgHoverDiv);
            this.removeRealDataStyle(this.$refs.stuHoverDiv);
            this.removeRealDataStyle(this.$refs.useNumHoverDiv);
            this.removeRealDataStyle(this.$refs.courPlanHoverDiv);
            this.removeRealDataStyle(this.$refs.systemLoginHoverDiv);
            this.tableRealTimeData = this.tableRealTeaTimeData;
            this.tableColumns = this.teaTableColumns;
          },
          handleUseNumRealTime(event){ // 点击评估使用次数
            this.addRealDataClassStyle(event);
            this.removeRealDataStyle(this.$refs.orgHoverDiv);
            this.removeRealDataStyle(this.$refs.stuHoverDiv);
            this.removeRealDataStyle(this.$refs.teaHoverDiv);
            this.removeRealDataStyle(this.$refs.courPlanHoverDiv);
            this.removeRealDataStyle(this.$refs.systemLoginHoverDiv);
            this.tableRealTimeData = this.tableRealEvaluateUseNumTimeData;
            this.tableColumns = this.evaluateUseNumTableColumns;
          },
          handleUseCourPlan(event){ // 点击课程计划数
            this.addRealDataClassStyle(event);
            this.removeRealDataStyle(this.$refs.orgHoverDiv);
            this.removeRealDataStyle(this.$refs.stuHoverDiv);
            this.removeRealDataStyle(this.$refs.teaHoverDiv);
            this.removeRealDataStyle(this.$refs.useNumHoverDiv);
            this.removeRealDataStyle(this.$refs.systemLoginHoverDiv);
            this.tableRealTimeData = this.tableRealCourPlanGenerateTimeData;
            this.tableColumns = this.courPlanGenerateTableColumns;
          },
          handleSystemLogin(event){ // 点击评估使用次数
            this.addRealDataClassStyle(event);
            this.removeRealDataStyle(this.$refs.orgHoverDiv);
            this.removeRealDataStyle(this.$refs.stuHoverDiv);
            this.removeRealDataStyle(this.$refs.teaHoverDiv);
            this.removeRealDataStyle(this.$refs.useNumHoverDiv);
            this.removeRealDataStyle(this.$refs.courPlanHoverDiv);
            this.tableRealTimeData = this.tableRealSystemLoginTimeData;
            this.tableColumns = this.systemLoginTableColumns;
          },
          // 添加点击机构样式
          addRealDataClassStyle(event){
            this.showMap = false
            // const e = this.$refs.orgHoverDiv;
            const e = event.currentTarget;
            this.clickItem = e;
            const listItems = e.childNodes;
            // const divItems = listItems.getElementsByTagName("div");
            //console.log(listItems)
            /*if (listItems) { // 确保有元素被引用
              listItems.forEach(item => {
                // 例如，给每个li添加一个类名
                console.log(item,item.nodeName)
                // item.classList.add('orgDescHoverDivStyle');
              });
            }
            console.log("img",listItems[0].childNodes)*/
            e.classList.add('orgHoverDivStyle');
            listItems[0].classList.add('orgIconHoverDivStyle');
            listItems[0].childNodes[0].classList.add('orgIconHoverImgStyle');
            listItems[2].classList.add('orgNumHoverDivStyle');
            listItems[4].classList.add('orgDescHoverDivStyle');
            /*this.$refs.orgHoverDiv.classList.add('orgHoverDivStyle');
            this.$refs.orgIconHoverDiv.classList.add('orgIconHoverDivStyle');
            this.$refs.orgIconHoverImg.classList.add('orgIconHoverImgStyle');
            this.$refs.orgNumHoverDiv.classList.add('orgNumHoverDivStyle');
            this.$refs.orgDescHoverDiv.classList.add('orgDescHoverDivStyle');*/
          },
          // 移除机构样式
          removeRealDataStyle(e){
            // const e = event.currentTarget;
            const listItems = e.childNodes;
            e.classList.remove('orgHoverDivStyle');
            listItems[0].classList.remove('orgIconHoverDivStyle');
            listItems[0].childNodes[0].classList.remove('orgIconHoverImgStyle');
            listItems[2].classList.remove('orgNumHoverDivStyle');
            listItems[4].classList.remove('orgDescHoverDivStyle');
           /* this.$refs.orgHoverDiv.classList.remove('orgHoverDivStyle');
            this.$refs.orgIconHoverDiv.classList.remove('orgIconHoverDivStyle');
            this.$refs.orgIconHoverImg.classList.remove('orgIconHoverImgStyle');
            this.$refs.orgNumHoverDiv.classList.remove('orgNumHoverDivStyle');
            this.$refs.orgDescHoverDiv.classList.remove('orgDescHoverDivStyle');*/
          },
          goDataOverviewPage(){
            this.$router.push("/dataOverview");
          },
          initChart() {
              // 获取 DOM 元素
              const chartDom = this.$refs.chart;
              // 初始化 ECharts 实例
              const myChart = echarts.init(chartDom);
              // 配置图表选项
              const option = {
                  xAxis: {
                      type: 'value'
                  },
                  yAxis: {
                      type: 'category',
                      data: this.orgRankCategory
                  },
                  series: [
                      {
                          data: this.orgRankValues,
                          type: 'bar',
                          // 通过设置系列的 name 属性为柱状图添加名称
                          name: '销量',
                          label: {
                              show: true,
                              position: 'right'
                          }
                      }
                  ]
              };
              // 使用刚指定的配置项和数据显示图表
              option && myChart.setOption(option);
          },
          headClass() {
              //表头居中显示
              return "text-align:center;padding:10px";
          },
          rowClass() {
              //表格数据居中显示
              return "text-align:center;padding:7px;";
          },
      },
      created() {
        console.log("created..................")
        //todo 地区id
        // let areaId = 510000
        this.areaName = localStorage.getItem("areaName");
        let areaId = localStorage.getItem("areaId");
        getPlatformStatistics(areaId).then(resp=>{
          console.log("获取平台基础统计信息",resp)
          if(resp.code == 200){
            this.orgData = resp.data;
            this.tableData = resp.data.areaList;
            this.mapData = resp.data.orgRankList
            // 显示地图
            this.showMapDiv = true
            this.orgRankCategory=[]
            this.orgRankValues = []
            // 便利数组
            resp.data.orgRankList.forEach((item,index,array)=>{
              this.orgRankCategory.push(item.area_name)
              this.orgRankValues.push(item.count)
              this.initChart();
            })
          }
        })
        // todo 开始时间和结束时间
        let startTime = '2010-01-01'
        let endTime = '2025-12-31'
        getGrowthData(startTime,endTime).then(resp=>{
          console.log("获取平台新增信息量=====",resp)
          this.growthData = resp.data;
          // 机构数据
          this.tableRealOrgTimeData = []
          if(resp.data.growthDeptList && resp.data.growthDeptList.length>0){
            resp.data.growthDeptList.forEach(item=>{
              let obj = {
                'create_date': item.create_date,
                'create_time': item.create_time,
                'area_province': item.area.split("/")[0],
                'area': item.area.substring(item.area.indexOf("/")+1),
                'dept_name': item.dept_name,
              }
              this.tableRealOrgTimeData.push(obj)
            })
          }
          // 学生数据
          this.tableRealStuTimeData = [];
          if(resp.data.growthStudentList && resp.data.growthStudentList.length>0){
            resp.data.growthStudentList.forEach(item=>{
              let obj = {
                'create_date': item.create_date,
                'create_time': item.create_time,
                'area_province': item.area.split("/")[0],
                'area': item.area.substring(item.area.indexOf("/")+1),
                'dept_name': item.dept_name,
                'stu_name': item.name,
              }
              this.tableRealStuTimeData.push(obj)
            })
          }

          // 教师数据
          this.tableRealTeaTimeData = []
          if(resp.data.growthTeacherList && resp.data.growthTeacherList.length>0){
            resp.data.growthTeacherList.forEach(item=>{
              let obj = {
                'create_date': item.create_date,
                'create_time': item.create_time,
                'area_province': item.area.split("/")[0],
                'area': item.area.substring(item.area.indexOf("/")+1),
                'dept_name': item.dept_name,
                'nick_name': item.nick_name,
              }
              this.tableRealTeaTimeData.push(obj)
            })
          }
          // 评估使用次数 recordList
          this.tableRealEvaluateUseNumTimeData = []
          if(resp.data.recordList && resp.data.recordList.length>0){
            resp.data.recordList.forEach(item=>{
              let obj = {
                'commit_date': item.commit_date,
                'commit_time': item.commit_time,
                'area_province': item.area.split("/")[0],
                'area': item.area.substring(item.area.indexOf("/")+1),
                'dept_name': item.dept_name,
                'node_name': item.node_name,
              }
              this.tableRealEvaluateUseNumTimeData.push(obj)
            })
          }
          //课程计划生成次数 planList
          this.tableRealCourPlanGenerateTimeData = []
          if(resp.data.planList && resp.data.planList.length>0){
            resp.data.planList.forEach(item=>{
              let obj = {
                'create_date': item.create_date,
                'create_time': item.create_time,
                'area_province': item.area.split("/")[0],
                'area': item.area.substring(item.area.indexOf("/")+1),
                'dept_name': item.dept_name,
                'node_name': item.node_name,
                'plate_name': item.plate_name,
              }
              this.tableRealCourPlanGenerateTimeData.push(obj)
            })
          }
          // 系统登录数据 loginList
          this.tableRealSystemLoginTimeData = []
          if(resp.data.loginList && resp.data.loginList.length>0){
            resp.data.loginList.forEach(item=>{
              let obj = {
                'dept_name': item.dept_name,
                'area_province': item.area.split("/")[0],
                'area': item.area.substring(item.area.indexOf("/")+1),
                'login_date': item.login_date,
                'login_time': item.login_time,
                'phone': item.phone,
              }
              this.tableRealSystemLoginTimeData.push(obj)
            })
          }


        })

          let a1 = {
                'dept_name': '机构名称',
                'area_province': '四川省',
                'area': '市县区域',
                'create_date': '2025-02-10',
                'time': '9.10',
                'stu_name': '李荣浩',
                'nick_name': '李老师',
              };
          // 评估使用次数
          let a2 = {
                'dept_name': '机构名称',
                'area_province': '四川省',
                'area': '市县区域',
                'commit_date': '2025-02-10',
                'commit_time': '11:10:37',
                'node_name': 'PDMS-2',
              };
          // 课程计划生成数
          let a3 = {
                'dept_name': '机构名称',
                'area_province': '四川省',
                'area': '市县区域',
                'commit_date': '2025-02-10',
                'commit_time': '11:10:37',
                'node_name': 'PDMS-2',
                'plate_name': '计划名称',
              };
          // 系统登录数据
          let a4 = {
                'dept_name': '机构名称',
                'area_province': '四川省',
                'area': '市县区域',
                'login_date': '2025-02-10',
                'login_time': '11:10:37',
                'node_name': 'PDMS-2',
                'phone': '137****5180',
              };
          for(let i = 0;i<30;i++){
           /* this.tableRealOrgTimeData.push(a1)
            this.tableRealStuTimeData.push(a1)
            this.tableRealTeaTimeData.push(a1)
            this.tableRealEvaluateUseNumTimeData.push(a2)
            this.tableRealCourPlanGenerateTimeData.push(a3)
            this.tableRealSystemLoginTimeData.push(a4)*/
          }

      }
    }
</script>

<style lang="scss" scoped>
    .orgHoverDivStyle{
      background-color: #E99D42 !important;
    }
    .orgIconHoverDivStyle{
      background-color: #E99D42 !important;
    }
    .orgIconHoverImgStyle{
      width: 50px!important;
      height: 50px!important;
    }
    .orgNumHoverDivStyle{
      color: white !important;
    }
    .orgDescHoverDivStyle{
      color: white !important;
    }
    .content-view {
        background: url("../../assets/images/index-bg.jpg") repeat-y;
        background-size: 100vw 100vh;
        width: 100vw;
        height: 100vh;
    }

    .main-view {
        display: flex;
        flex-direction: row;

        .left-view {
            width: 25%;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 15px;

            .left-top-view {
                height: 32vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .main-left-top-orgData {
                    font-size: 0.11rem;
                    font-weight: bold;
                    width: 17vw;
                }

                .main-left-top-img-view {
                    width: 17vw;
                    margin-bottom: 1vh;
                }

                .main-left-top-img-view img {
                    height: 1.5vh;
                    width: 10vw;
                }

                .main-left-top-data > :first-child {
                    margin-right: 2vh;
                }

                .main-left-top-data > :last-child {
                    margin-left: 2vh;
                }

                .main-left-top-data-view {
                    width: 5vw;
                    height: 14vh;
                    border-radius: 0.5vw;
                    color: white;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    flex-direction: column;
                    padding: 10px 0px;
                }

                .main-left-top-data-view-value {
                    font-weight: bold;
                    font-size: 0.1rem;
                }

                .main-left-top-data-view-title {
                    font-size: 0.08rem;
                }

                .orgNumBg {
                    background: #8674FE;
                }

                .stuNumBg {
                    background: #66C8FF;
                }

                .teacherNumBg {
                    background: #FD8F67;
                }

                .main-left-top-data {
                    height: 15vh;
                    display: flex;
                    flex-direction: row;
                }
            }

            .left-bottom-view {
                width: 80%;
                height: 53vh;
                background: white;
                border-radius: 0.5vw;
                display: flex;
                align-items: center;
                flex-direction: column;

                .main-left-bottom-title {
                    width: 86%;
                    margin: 2vh;
                    border-bottom: 5px solid #FEA342;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                }

                .main-left-bottom-title-top {
                    background: url("../../assets/images/main-left-bottom-nav.png") no-repeat;
                    padding-left: 35px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .main-left-bottom-title-top div {
                    font-size: 0.1rem;
                    font-weight: bold;
                    margin-left: 5px;
                }

                .main-left-bottom-title-bottom {
                    display: flex;
                    flex-direction: row;
                    align-items: flex-end;

                    .title-num {
                        font-size: 0.14rem;
                        font-weight: bold;
                    }

                    .title-unit {
                        font-size: 0.1rem;
                        margin-left: 5px;
                    }
                }

                .main-left-bottom-content {
                    width: 86%;
                    height: 41vh;
                    border: 1px solid #FEA342;
                    overflow: hidden;
                    text-align: center;
                }
            }
        }

        .right-view {
            display: flex;
            width: 75%;
            height: 85vh;
            align-items: center;
            flex-direction: column;
            border-radius: 15px;

            .right-top-view {
                display: flex;
                width: 100%;
                height: 57vh;
                align-items: center;
                flex-direction: row;
                border-radius: 15px;

                .right-view-left {
                  width: 66%;
                  border-radius: 15px;
                  height: 57vh;
                  overflow: hidden;
                /*  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;*/
                  .el-table{
                    margin: 2vh auto 0vh auto;
                    width: 80%;
                    border-radius: 10px;
                    background-color: #66C8FF;
                  }
                  /deep/ .el-table .el-table__header-wrapper{
                    border-radius: 10px 10px 0 0 !important;
                  }
                  /deep/ .el-table .el-table__header th {
                    background-color: #11A2F0; /* 修改为需要的颜色 */
                  }
                  /* 在你的组件或全局样式中 */
                 /deep/ .el-table__body-wrapper {
                    overflow-y: hidden !important;
                  }

                  /* .custom-scrollbar ::-webkit-scrollbar {
                     width: 8px;
                     height: 8px;
                     background-color: transparent;
                     overflow-y: hidden;
                   }
                   .custom-scrollbar ::-webkit-scrollbar-thumb {
                     background-color: #000;
                     border-radius: 4px;
                   }
                   .custom-scrollbar ::-webkit-scrollbar-track {
                     background-color: #7BC8FF;
                     border-radius: 4px;
                   }*/
                }

                .right-view-right {
                    width: 34%;
                    height: 100%;
                    border-radius: 15px;

                    .main-left-top-orgData {
                        margin-top: 50px;
                        font-size: 0.11rem;
                        font-weight: bold;
                        width: 17vw;
                    }

                    .main-left-top-img-view {
                        width: 17vw;
                        margin-bottom: 1vh;
                    }

                    .main-left-top-img-view img {
                        height: 1.5vh;
                        width: 10vw;
                    }

                    .paihangbangChart {
                        background: white;
                        border-radius: 1vw;
                        width: 90%;

                        div {
                            width: 95%;
                            height: 40vh;
                        }
                    }

                }
            }

            .right-bottom-view {
                width: 100%;
                height: 28vh;
                border-radius: 15px;

                .main-right-bottom-top {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    .main-right-bottom-top-title {
                        .main-left-top-orgData {
                            margin-top: 10px;
                            font-size: 0.11rem;
                            font-weight: bold;
                            width: 17vw;
                        }

                        .main-left-top-img-view {
                            width: 17vw;
                            margin-bottom: 1vh;
                        }

                        .main-left-top-img-view img {
                            height: 1.5vh;
                            width: 10vw;
                        }
                    }

                    .main-right-bottom-top-detail {
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        font-size: 20px;
                        font-weight: bold;
                        color: #FEBA23;
                        padding-right: 4%;
                        cursor: pointer;
                    }
                }

                .main-right-bottom-bottom {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-right: 2%;
                    justify-content: space-between;

                    .main-right-bottom-bottom-data {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding: 15px 0px;
                        background: white;
                        border-radius: 10px;
                        height: 20vh;
                        margin-right: 2%;
                        cursor: pointer;

                        .num {
                            padding: 10px 0px;
                            font-size: 24px;
                            font-weight: 600;
                        }

                        .titleStype {
                            font-size: 15px;
                            font-weight: 600;
                            color: #666666;
                        }

                        .iconDiv {
                            width: 50px;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50px;
                        }

                        .one {
                            background-color: #FD85A2;
                        }

                        .two {
                            background-color: #FEBD2A;
                        }

                        .three {
                            background-color: #FF8753;
                        }

                        .four {
                            background-color: #18DCA7;
                        }

                        .five {
                            background-color: #51D5FF;
                        }

                        .six {
                            background-color: #FFC84D;
                        }

                        .iconDiv img {
                            width: 25px;
                            height: 25px;
                        }

                    }
                }


            }
        }
    }

    //隐藏指定 el-table 的水平滚动条
    .custom-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      background-color: transparent;

    }
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
      width: 0px !important;
      border-right-width: 0;
      border-bottom-width: 0;
      padding: 0;
    }

    .hide-scrollbar /deep/ .el-table__body {
      width: 100% !important;
      table-layout: fixed;
      border-collapse: separate;
    }

    .hide-scrollbar /deep/ .el-input--medium .el-input__inner {
      color: #000000;
      border: 1px solid #000000;
      height: 0.1875rem;
      line-height: 0.1875rem;
      background: transparent;
    }
</style>
